import { CSSProperties, FC, Fragment, useState, ChangeEvent, useMemo, useEffect } from 'react';
import { Button, Form, Input, ConfigProvider } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setLogin } from '@/redux/modules/user';
import { Login } from '@/apis/user';
import { getUserAgent } from '@/utils';
import storage from '@/lib/storage';

import './index.less';
const { Item } = Form;

const submitBtnDisableCSS: CSSProperties = {
  background: '#fe2c55',
  color: '#ffffff',
};

const submitBtnCSS: CSSProperties = {
  background: '#ffc2c6',
  color: '#fff4f5',
};

const LoginForm: FC<{}> = () => {
  const [mobile, setMobile] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const isSubmitDisable = useMemo<boolean>(() => {
    return !(!!mobile && !!password);
  }, [mobile, password]); //setIsSubmitDisable
  const handleMobileChange = (e: ChangeEvent<HTMLInputElement>) => {
    setMobile(e.target.value);
  };
  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  const dispatch = useDispatch();
  const user = useSelector((state: any) => state.user);

  useEffect(() => {
    console.log('useEffect-user', user);
  }, [user]);

  const login = () => {
    Login({
      UserAgent: getUserAgent(),
      Ip: user.Ip,
      Password: password,
      Mobile: mobile,
    }).then((res) => {
      if (res.error_code === 0) {
        const { access_token, expires_in } = res.data;
        storage.setItem('Authorization', access_token, expires_in);
        dispatch(setLogin({ isLogin: true }));
      }
    });
  };
  return (
    <Fragment>
      <ConfigProvider
        theme={{
          components: {
            Button: { linkHoverBg: 'transparent', colorLinkHover: '#ab7575' },
          },
        }}
      >
        <div className="w-full flex justify-center mt-10">
          <Form className="w-80">
            <Item
              name="mobile"
              rules={[
                {
                  required: true,
                  message: '请输入手机号',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '不是正确的手机号',
                },
              ]}
            >
              <Input placeholder="手机号/邮箱" className="h-12" value={mobile} onChange={handleMobileChange}></Input>
            </Item>
            <Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}
            >
              <Input placeholder="密码" className="h-12" value={password} onChange={handlePasswordChange}></Input>
            </Item>
            <span className="text-xs" style={{ color: '#999' }}>
              首次登录将直接注册账号
            </span>
            <Item>
              <div className="agreement mt-5 mb-3">
                同意
                <a className="agreement-link no-underline">用户协议</a>和<a className="agreement-link no-underline">隐私协议</a>
                <Button type="link" className="ml-14">
                  忘记密码
                </Button>
              </div>
              <Button className={`text-center w-80 h-12 text-base`} disabled={isSubmitDisable} style={!isSubmitDisable ? submitBtnDisableCSS : submitBtnCSS} onClick={login}>
                登录/注册
              </Button>
            </Item>
          </Form>
        </div>
      </ConfigProvider>
    </Fragment>
  );
};

export default LoginForm;
